import { useState, useCallback } from "react";
import type { Card } from "../types";


const useResizeCard = () => {
    // 在App组件中添加状态
    const [resizingCardId, setResizingCardId] = useState<string | null>(null);
    const [resizeStartPos, setResizeStartPos] = useState({ x: 0, y: 0 });
    const [resizeStartSize, setResizeStartSize] = useState({ width: 0, height: 0 });

    // 处理开始调整尺寸
    const handleResizeStart = useCallback(
        (e: React.MouseEvent, card: Card) => {
            e.preventDefault();
            e.stopPropagation();
            setResizingCardId(card.id);
            setResizeStartPos({ x: e.clientX, y: e.clientY });
            setResizeStartSize({ width: card.width, height: card.height });
        },
        []
    );


    // 结束调整尺寸
    const endResize = () => {
        setResizingCardId(null);
    }

    // 在卡片渲染部分添加调整触手
    const getResizeHandler = (card: Card, hoveredCardId: string | null) => <div
        className="resize-handle"
        style={{
            display: hoveredCardId === card.id ? 'block' : 'none',
        }}
        onMouseDown={(e) => handleResizeStart(e, card)}
    />


    return {
        getResizeHandler,
        resizingCardId,
        resizeStartPos,
        resizeStartSize,
        endResize,
    }
}

export default useResizeCard